<script>
    import Inner from '../components/dispatch.svelte'
    import Outer from '../components/dispatch2.svelte'
    import CustomButton from '../components/customButton.svelte'
	let m = { x: 0, y: 0 };

	function handleMousemove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
    }
    function handleClick() {
		alert('clicked')
    }
    function handleMessage(event) {
		alert(event.detail.text);
	}
</script>

<style>
	div { width: 100%; height: 100%; }
</style>

<ol>
    <li>
        <!-- 事件1 -->
        <div  on:mousemove={handleMousemove}>
            The mouse position is {m.x} x {m.y}
        </div>
    </li>
    <li>
        <!-- 事件修饰符
            preventDefault 
            stopPropagation 
            passive 
            nonpassive 
            capture 
            once 
            self
        -->
        <button on:click|once={handleClick}>
            Click me
        </button>
    </li>
    <li>
        <!-- 接受子组件事件 -->
        <Inner on:message= {handleMessage}/>
    </li>
    <li>
        <!-- 接受孙组件事件 -->
        <Outer on:message= {handleMessage}/>
    </li>
    <li>
        <!-- 事件转发 -->
        <CustomButton on:click={handleClick} />
    </li>
</ol>